<template>
  <div class="notification-list">
    <div 
      v-for="notification in notifications"
      :key="notification.id"
      class="notification-item"
      :class="{ 'is-read': notification.is_read }"
    >
      <div class="notification-content">
        <div class="notification-header">
          <span class="notification-title">{{ notification.title }}</span>
          <span class="notification-time">{{ notification.createTime }}</span>
        </div>
        <div class="notification-body">{{ notification.content }}</div>
      </div>
      <div class="notification-actions">
        <el-button 
          v-if="!notification.is_read"
          type="primary" 
          link
          @click="$emit('read', notification)"
        >
          标为已读
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  notifications: {
    type: Array,
    required: true
  }
})

defineEmits(['read'])
</script>

<style scoped>
.notification-list {
  margin-top: 20px;
}

.notification-item {
  padding: 16px;
  border-bottom: 1px solid #EBEEF5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.notification-item.is-read {
  opacity: 0.7;
}

.notification-content {
  flex: 1;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.notification-title {
  font-weight: bold;
}

.notification-time {
  color: #909399;
  font-size: 12px;
}

.notification-body {
  color: #606266;
  line-height: 1.5;
}

.notification-actions {
  margin-left: 16px;
}
</style> 